<template>
   <div>
    <p>欢迎光临-vue开发的水果店</p>
    <table class="tb">
        <tr><td>苹果10￥/斤,折扣(8折)</td></tr>
        <tr><td>你需要购买几斤水果:<input type="text" v-model="a"></td></tr>
        <tr><td> <button @click="hh">结账啦</button> </td></tr>
        <tr><td> 结账单: 总价:{{b1}}元 折后价:{{b2}}元 优惠:{{b3}}元</td></tr>
    </table>
   </div>
</template>

<script>
export default {
     data(){
         return{
            a:'0',
            b1:'0',
            b2:'0',
            b3:'0'
        } 
     },
     methods:{
          hh(){
            this.b1 = this.a*10
            this.b2 = (this.a*10)*0.8
            this.b3 = (this.a*10)-((this.a*10)*0.8)
        }
     }
}
</script>

<style>
    p{
        text-align: center;
        font-size: 19px;
    }
    .tb {
      border-collapse: collapse;
      width: 100%;
      height: 60%;
      border: 5px solid black;
      
    }
    
    .tb th {
      background-color: #0094ff;
      color: white;
    }
    
    .tb td,
    .tb th {
      padding: 5px;
      border: 5px solid black;
      text-align: center;
    }
    
    .add {
      padding: 5px;
      border: 1px solid black;
      margin-bottom: 10px;
    }
</style>